<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员注册管理系统</title>
    <style>
        .main {
            width: 80%;
            /*border: 1px solid #dc127b;*/
            margin: 0 auto;
            text-align: center;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
<div class="main">
    <?php
    include 'nav.php';
    ?>
    <form action="postLogin.php" method="post" onsubmit="return check()">
        <table align="center" border="1" style="border-collapse: collapse" cellpadding="10">
            <tr>
                <td align="right">用户名</td>
                <td align="left"><label>
                        <input name="username" placeholder="请输入用户名"> <span class="red">*</span>
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left"><label>
                        <input type="password" name="pw"> <span class="red">*</span>
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right"><input type="submit"></td>
                <td><input type="reset"></td>
            </tr>
        </table>
    </form>
</div>
<script>
    function check(){
        //判断用户名是否填写，以及内容是否合规
        let username = document.getElementsByName('username')[0].value.trim();
        //用户名的规则：大写、小写字母；数字；3-10个长度
        let usernameReg = /^[A-Za-z0-9]{3,10}$/;
        if(!usernameReg.test(username)){
            alert('用户名只能由大写、小写字母、数字构成，且长度为3-10个字符！');
            return false;
        }
        //密码的规则：大写、小写字母、数字、_、-、*，6-10个长度
        let pw = document.getElementsByName('pw')[0].value.trim();
        let pwReg = /^[A-Za-z0-9_\-*]{6,10}$/;  /*\是转义符*/
        if(!pwReg.test(pw)){
            alert('密码只能由大写、小写字母、数字、_、-、*构成，且长度为6-10！');
            return false;
        }

    }
</script>
</body>
</html>